<script setup lang="ts">
import { useRouter } from "vue-router";
import footers from "@/components/common/footers.vue";

const router = useRouter();
</script>

<template>
  <div class="register">
    <!-- logo图标、以及返回首页按钮 -->
    <div class="serverCenter">
      <img class="logo" src="@/assets/logo.webp" alt="logo" />
      <span @click="router.push({ path: '/' })"
        >&#xe608;&nbsp;&nbsp;返回首页</span
      >
    </div>
    <!-- 用户注册表单 -->
    <form id="form" method="post" action="#" novalidate>
      <h1 class="title">用户注册</h1>
      <!-- 账号 -->
      <label class="accountNumber" for="accountNumber">
        &nbsp;&nbsp;&nbsp;账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：
        <input
          id="accountNumber"
          type="text"
          placeholder="请输入账号"
          autofocus
          autocomplete="on"
          name="accountNumber"
        />
      </label>

      <!-- 用户密码 -->
      <label class="pwd" for="pwd">
        &nbsp;&nbsp;&nbsp;设置密码：
        <input
          id="pwd"
          type="password"
          placeholder="设置8-16位数字和字母组成的密码"
          autocomplete="off"
          name="pwd"
        />
      </label>

      <!-- 确认密码 -->
      <label class="againPwd" for="againPwd">
        &nbsp;&nbsp;&nbsp;设置密码：
        <input
          id="againPwd"
          type="password"
          placeholder="再次输入密码"
          autocomplete="off"
          name="againPwd"
        />
      </label>

      <!-- 姓名 -->
      <label class="name" for="name">
        &nbsp;&nbsp;&nbsp;姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：
        <input
          id="name"
          type="text"
          placeholder="请输入"
          autocomplete="on"
          name="name"
        />
      </label>

      <!-- 身份证号 -->
      <label class="useId" for="useId">
        &nbsp;&nbsp;&nbsp;身份证号：
        <input
          id="useId"
          type="text"
          placeholder="请输入"
          autocomplete="on"
          name="useId"
        />
      </label>

      <!-- 手机号码 -->
      <label class="tel" for="tel">
        &nbsp;&nbsp;&nbsp;手机号码：
        <input
          id="tel"
          type="tel"
          placeholder="请输入"
          autocomplete="on"
          name="tel"
        />
      </label>

      <!-- 邮箱验证码 -->
      <label class="email" for="email">
        邮箱验证码：
        <input
          id="email"
          type="email"
          placeholder="请输入"
          autocomplete="on"
          name="email"
        />
        <!-- 获取验证码 -->
        <button class="getCode">获取验证码</button>
      </label>

      <!-- 协议 -->
      <div class="agreement">
        <label for="agreement">
          <input type="checkbox" id="agreement" />注册即代表您同意
        </label>
        <span>《用户协议》</span>和
        <span>《隐私政策》</span>
      </div>

      <!-- 注册 -->
      <input class="btn" type="button" value="注&nbsp;&nbsp;&nbsp;册" />

      <!-- 已有账号？立即登录 -->
      <div class="login" @click="router.push({ path: '/login' })">
        <a>已有账号？</a>
        <a>立即登录</a>
      </div>
    </form>
    <!-- 公共底部 -->
    <footers />
  </div>
</template>

<style scoped lang="scss">
.register {
  width: 100%;
  min-height: inherit;
  // 竖直居中
  @include flexColumnCenter;
  padding-top: 45px;
  gap: 13px 0px;
  // 背景图片
  background: transparent url("@/assets/loginRegister.webp") no-repeat fixed
    center top;
  background-size: 100% 380px;
}

.serverCenter {
  width: 1000px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  color: #ffffff;
  .logo {
    width: 322px;
    height: 62px;
  }
  > span {
    height: 14px;
    font-size: 14px;
    cursor: pointer;
  }
}
#form {
  width: 1000px;
  height: 768px;
  background-color: #ffffff;
  // 垂直居中
  @include flexColumnCenter;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  padding-top: 48px;
  margin-bottom: 64px;
}
// 表单标题
.title {
  height: 45px;
  line-height: 45px;
  font-size: 32px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 48px;
}

// 账号，密码，再次确认密码，用户名称，
.accountNumber,
.pwd,
.againPwd,
.name,
.useId,
.tel,
.email {
  height: 34px;
  display: flex;
  align-items: center;
  color: #333333;
  cursor: pointer;
  margin-bottom: 16px;

  > input {
    width: 360px;
    height: 100%;
    padding-left: 10px;
    background-color: #ffffff;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-shadow: 0 0 0 60px #fff inset;
  }

  // 特殊设置 input 的输入框内容
  #email {
    width: 248px !important;
  }

  // 获取验证码
  .getCode {
    width: 102px;
    height: 34px;
    background-color: #ffffff;
    border-radius: 4px;
    border: 1px solid #2163e0;
    line-height: 34px;
    text-align: center;
    color: #2163e0;
    font-size: 14px;
    box-sizing: border-box;
    cursor: pointer;
    margin-left: 10px;
  }
}

// 邮件去掉底部距离
.email {
  margin-bottom: 0px !important;
}

// 协议--
.agreement {
  cursor: pointer;
  font-size: 14px;
  color: #606266;
  @include flexCenter;
  margin: 27px 0px;
  > label {
    /* 单选按钮、多选按钮不能居中对齐的问题 */
    @include flexCenter;
    > input {
      width: 14px;
      height: 14px;
      margin-right: 4px;
      border-color: red;
    }
  }
  > span {
    font-size: 14px;
    color: #3470e3;
  }
}
// 协议==

// 注册--
.btn {
  width: 360px;
  height: 36px;
  // background: #2163e0;
  background-color: #2486ff;
  transition: all 0.25s;
  &:hover {
    background-color: #0160d5;
  }
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
// 注册==

.login {
  margin: 24px;
  height: 18px;
  font-size: 14px;
  line-height: 18px;
  color: #606266;
  cursor: pointer;
  > a:last-child {
    color: #2163e0;
  }
}
</style>
